<template>
	<view>
		<view id="app" class="app-height topUp">
		    <view class="bg">
		        <image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon106.png"/>
		        <view class="p">金币与元对等，只能兑换等额的币值</view>
		    </view>
		    <view class="enter">
		        <input class="price" type="number" v-model="rechargeMoney" placeholder="请输入充值金额"/>
		        <view class="text p">兑换10金币，您需要支付10.00元！</view>
		        <view class="connaught-style">
		            <view class="pay-list">
		                <view class="pay-item">
		                    <view  style="display: flex; align-items: center;"><image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/wechat_pay.png"/>微信支付
		                    </view>
		                    <image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/tick.png" class="tick"/>
		                </view>
		            </view>
		        </view>
		        <view class="button" @click="toRecharge">去支付</view>
		        <view class="protocol">
						充值代表已阅读并同意
						<view class="a">《用户充值协议》</view>
				</view>
		    </view>
		</view>
	</view>
</template>

<script>
import commonApi from '@/utils/commonMethod.js';

export default {
	data() {
		return {
			currentUser:'',//当前用户
			rechargeMoney:'',//充值金额
			
			startTime:'', //进入页面时间
			endTime:'',//离开页面时间
			currentUrl:'',//当前页面全路径
		}
	},
	onShow(){
			
		setTimeout(()=> {
			
			if (getApp().globalData.onShow) {
				getApp().globalData.onShow = 0;
				console.log("demo前后台切换之切到前台")
			}
			else {
				console.log("demo页面被切换显示")
				this.startTime = +new Date();
			}
			
		}, 100);
	},
	onHide(){
		setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	onUnload(){
			setTimeout(() => {
			var that = this
			if (getApp().globalData.onHide) {
				getApp().globalData.onHide = 0;
				console.log("还在当前页面活动")
			}
			else {
				that.endTime = +new Date();
				console.log("demo页面停留时间：" + (that.endTime - that.startTime))
				var stayTime = Math.round((that.endTime - that.startTime)/1000);
			   //这里获取到页面停留时间stayTime，然后了可以上报了
			   this.saveFootPrint(stayTime);
			}
		}, 100)
	},
	async mounted() {
		const res = await commonApi.currentUserAxios();
		console.log(JSON.stringify(res));
		this.currentUser = res.data.session_user_h5;
		
		const pages = getCurrentPages()
		const currentPage =pages[pages.length - 1]
		this.currentUrl = currentPage.$page.fullPath
		
	},
	methods: {
		saveFootPrint(stayTime){
		    commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"充值")
		  			
		},
		toRecharge(){
			if (!this.rechargeMoney) {
				uni.showModal({
					title: "",
					content: "请输入充值金额",
					showCancel:false,
					success: function (res) {
						var that = this
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			}
			let that = this;
			console.log("调用充值方法");
			uni.login({
			  provider: 'weixin', //使用微信登录获取code
			  success: function (loginRes) {
			    console.log(that.currentUser)
			    //使用微信code获取openid
			    commonApi.getOpenId(loginRes.code).then(res => {
			      let openid = res.data.openid;
			      let userInfo = {
			        id: that.currentUser.id,
			        openId: openid
			      }
			      commonApi.topUp(userInfo, that.rechargeMoney).then(res => {
			        //调起微信支付
			        uni.requestPayment({
			          provider: 'wxpay',
			          timeStamp: res.data.map.timeStamp,// 时间戳（单位：秒）
			          nonceStr: res.data.map.nonceStr,// 随机字符串
			          package: res.data.map.package,// 统一下单接口返回的 prepay_id 参数值
			          signType: res.data.map.signType,// 签名算法，应与后台下单时的值一致
			          paySign: res.data.map.paySign,// 签名
			          success(res) {
			            //支付成功
			            // 跳转到我的页面
			            uni.switchTab({
			              url:'/pages/tabBar/personal/personal'
			            })
			          },
			          fail(err) {
			            //支付失败、用户取消支付
			          }
			        });
			      })
			    });
			  }
			});
			// recharge(this.currentUser,this.rechargeMoney,"/h5/personalcenter/myGold.html")
		}
	}
}
</script>

<style>
	.topUp .bg {
	    position: relative;
	}
	image {
	    width: 100%;
		 vertical-align: top;
	}
	.topUp .bg p {
	    width: 100%;
	    text-align: center;
	    position: absolute;
	    top: 45rpx;
	    color: #ffffff;
	}
	.topUp .enter .price {
	    width: 70%;
	    height: 74rpx;
	    border-radius: 37rpx;
	    text-align: center;
	    background-color: #ebebeb;
	    border: 0;
	    font-size: 13px;
	    margin: 65rpx auto 70rpx;
	}
	input{
	    font-family: inherit;
	    font-size: inherit;
	    font-style: inherit;
	    font-weight: inherit;
	}
	.topUp .enter .text {
	    margin-bottom: 70rpx;
	}
	.connaught-style .pay-list {
	    padding: 0px 28rpx;
	}
	.connaught-style .pay-list .pay-item:first-child {
	    border-bottom: 1.5rpx solid #ededed;
	}
	
	.connaught-style .pay-list .pay-item {
	    padding: 0px 7rpx;
	}
	.connaught-style .pay-list .pay-item > view {
	    line-height: 90rpx;
	}
	.connaught-style .pay-list .pay-item > view > image {
	    width: 35rpx;
	    margin-right: 21rpx;
	}
	.connaught-style .pay-list .pay-item .tick {
	    width: 35rpx;
	}
	.topUp .enter {
	    background-color: #ffffff;
	    border-radius: 9rpx;
	    width: 92%;
	    left: 4%;
	    height: calc(100% - 75px);
	    top: 112rpx;
	    position: fixed;
	    text-align: center;
	}
	.topUp .enter .button {
	    height: 82rpx;
	    background-color: #029e9d;
	    width: 65%;
	    margin: 70rpx auto;
	    color: #ffffff;
	    border-radius: 40rpx;
	    border: 0px;
	    font-size: 17px;
		line-height: 82rpx;
	}
	.topUp .enter .protocol {
	    position: absolute;
	    bottom: 56rpx;
	    left: 0;
	    width: 100%;
	    color: #8f9aa8;
	}

	.topUp .enter .protocol .a {
	    color: #333333;
	    margin-left: -7rpx;
	}
	.a {
	    color: #5c5c5c;
	    transition: 0.5s ease;
	    -moz-transition: 0.5s ease;
	    -webkit-transition: 0.5s ease;
	    -o-transition: 0.5s ease;
	}
	.connaught-style .pay-list .pay-item{
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    flex-wrap: wrap;
	}
	.topUp .bg .p {
	    width: 100%;
	    text-align: center;
	    position: absolute;
	    top: 45rpx;
	    color: #ffffff;
	}

</style>